<template>
<ScreenAdapter width="1800" height="924">
  <div class="wuliPage">
    <div class="left">
      <enterprise1new
        v-for="(item,index) in titles"
        :key=item
        :title="item"
        :index="index"
        :field="$store.state.field"
        :location="$store.state.location"
        :searchname="$store.state.searchname"
      ></enterprise1new>
    </div>

    <div class="center">
      <div class="top-select">
        <div class="select-left">
          <el-button type="primary" ref='china' @click="chageRange('china')">全国</el-button>
          <el-button type="primary" ref='zj' @click="chageRange('zj')">浙江</el-button>
          <el-button type="primary" ref='nb' @click="chageRange('nb')">宁波</el-button>
        </div>
        <el-select v-model="mapping_name" placeholder="新材料" @visible-change="visibleChange($event)" popper-class="popper" :popper-append-to-body="false">
          <template slot="prefix">
            <span>
              <img src="../../../public/images/enterprise/xia@2x.png" 
                :style="'transform: rotateZ('+ rotateZ + 'deg)'">
              </span>
          </template>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <div class="top-search">
          <!-- <el-autocomplete
            v-model="search"
            placeholder=""
            popper-class="popper"
            teleported="false"
            :fetch-suggestions="querySearchAsync2"
            @select="handleSelect"
            :popper-append-to-body="false"
          ></el-autocomplete> -->
          <el-input
            v-model="search"
            placeholder=""
            @select="handleSelect"
            @focus="btKeyUp"
            @blur="btKeydone"
          ></el-input>
          <el-button type="primary" @click="goSearch">
            <img src="/images/wuli/搜索@2x.png" >
          </el-button>
        </div>
      </div>
      <div class="bottom-info">
        <enterprise0 :id="this.$store.state.gs_id" :field="$store.state.field" :location="$store.state.location"></enterprise0>
      </div>
    </div>

    <div class="right">
      <img src="images/wuli/right/半年度上升最快榜单底@2x.png">
      <div class="enterprise2">
        <!-- <enterprise2 pos="1" :info="info1" :field="$store.state.field" :location="$store.state.location"></enterprise2> -->
        <enterprise2new pos="1" :info="info1" :field="$store.state.field" :location="$store.state.location" :searchname="$store.state.searchname"></enterprise2new>
        <enterprise2new pos="2" :info="info2" :field="$store.state.field" :location="$store.state.location" :searchname="$store.state.searchname"></enterprise2new>

        <!-- <enterprise2 pos="2" :info="info2" :field="$store.state.field" :location="$store.state.location"></enterprise2> -->
      </div>
    </div>

  </div>
  </ScreenAdapter>
</template>

<script>
import ScreenAdapter from '@/components/ScreenAdapter.vue'
import enterprise0 from './components/enterprise0.vue'
import enterprise1new from './components/enterprise1new.vue'
import enterprise2 from './components/enterprise2.vue'
import enterprise2new from './components/enterprise2new.vue'

export default {
  name: '',
  components: {
    ScreenAdapter,
    enterprise0,
    enterprise1new,
    enterprise2,
    enterprise2new
  },
  props: {},
  data () {
    return {
      options: [{
        value: '新材料',
        label: '新材料'
      }, {
        value: '磁性材料',
        label: '磁性材料'
      }, {
        value: '稀土永磁材料',
        label: '稀土永磁'
      }],
      rotateZ: 180,
      range: 'china',
      search: '',
      // outsides: [1,0,0,0],
      titles: ['头部企业','高成长企业','潜力企业','胚芽企业'],
      info1: [],
      info2: [],
      dataLeft:[],
      mapping_name: '',
      timeout: null
    }
  },
  computed: {

  },
  watch: {
    mapping_name: function (newN, oldN){
      console.log(newN)
      this.$store.commit('setField',newN)
    },
    '$store.state.ue1': function (){
      this.$ue4('ue1',this.$store.state.ue1)
    },
    '$store.state.ue2': function (){
      this.$ue4('Median',this.$store.state.ue2)
    }
  },
  created () {
    ue.interface.transList = this.trans
  }, 
  mounted () {

    this.chageRange(this.range)
    ue4("qqq",{mes:"qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq"})
    window.ue4("qqq",{mes:"qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq"})
    // ue.interface.updateData = function(data){
    //   console.log('2===== '+data)
    //   ue4("getData2",{mes:"get all dataxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"})
    // }
  },
  methods: {
    async trans(data){
      let res = await this.getData00(data)
      this.search= res
      this.goSearch()
    },
    getData00(data){
      let res= JSON.stringify(data)
      res=JSON.parse(res)
      return res
    },
    btKeyUp(){
      this.$ue4('startInput',true)
    },
    btKeydone(){
      this.$ue4('startInput',false)
    },
    async getSearch(){
      const url = '/dcockpit/rest/cockpitApi/searchListNormResult'
      
      let x = await this.$api.post(url,{
		    "normGuid": "31b4420a-2e87-4580-ab77-29ff341fe2c8",
        "fieldList": [{"key":"company_name","value":this.search.toString()}]
      })
      if(x.status.code!='1') return
      console.log(x.custom.result.cockpitData[0])
      let {custom:{result}}={...x}
      // this.$store.commit('setId', result.cockpitData[0].company_code)
      try {
        this.$store.dispatch('setId', result.cockpitData[0].company_code)
      } catch (error) { 
        console.log('error: ',error)
      }

      // this.cockpitData=result.cockpitData
    },
    goSearch(){
      // this.getSearch()
      this.$store.commit('setSearchname',this.search)
    },
    querySearchAsync2(queryString, cb) {
      clearTimeout(this.timeout);
      var results = []
      if (queryString == '') {
        cb(results);
      } else {
        //这里去掉后端的接口.根据自己接口的情况进行赋值
        this.$api.post("/dcockpit/rest/enterprise/getFuzzyEnquiry", {"ouname":queryString.toString()}).then(
          res => {
            if (res.status.code == 1) {
              var result = res.custom.list
              //循环放到一个远程搜索需要的数组
              for (let i = 0; i < result.length; i++) {
                const element = result[i];
                results.push({
                  value: element.mc,
                })
              }
              cb(results);
            } else {
              results = []
              cb(results);
            }
          }
        );
      }
    },
    handleSelect (item) {
      this.search = item.value
      console.log('search: ',item.value)
      this.getSearch()
    },
    visibleChange(isV){
      if(isV){
        this.rotateZ = 0
      } else {
        this.rotateZ = 180
      }
    },
    chageRange(range){
      ['china','zj','nb'].forEach(item => {
        this.$refs[item].$el.style = 'background-color: #043f7a;'
      })
      this.$refs[range].$el.style = 'background-color: #0088FF;'
      if(range=='zj'){
        this.$store.state.location = '浙江省'
      }else if(range=='nb'){
        this.$store.state.location = '宁波市'
      } else {
        this.$store.state.location = 'china'
      }
      // this.range = range
    },
    getTitle(now_title){
      console.log('现在的title是: '+now_title)
      this.info2 = this.info1
      this.commit2UE()
    },
    commit2UE(){
      ue4("getData2",{mes:"get all dataxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"})
    },

  }
}
</script>

<style scoped lang="stylus">
.wuliPage{
  font-family: 'SourceHanSansCN-Regular' !important;
  z-index 1;
  position relative;
  box-sizing: border-box;
  width: 1800px;
	height: 924px;
  // background-color: #090a13;
  
  //24
  padding: 0px 10px 10px 10px;
  // padding-top: 24px;
  // padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  .left {
    // visibility: hidden;
    position relative;
    padding-top: 4px;
    // width: 607px;
    width: 471px;
    height: 100%;
  }
  .center {
    position relative;

    padding-top: 9px;
    // width: 530px;
    width: 770px;

    height: 100%;
  }
  .right {
    width: 472px;
    height: 100%;
  }
}
>>> .el-select {
  font-family: 'SourceHanSansCN-Regular' !important;
  width 148px;
  box-sizing: border-box;
  height: 42px;
  .el-input {
    background-color: #043F7A;
    height: 42px;
    .el-input__inner {

      font-size: 17px !important;
    }
  }
  .el-input__prefix {
    position relative;
    img {
      position absolute;
      left: auto;
      right: 14px;
      top: 4px;
      width: 8px;
      transition: transform .3s;
    }
  }
  .el-input__inner {
    font-family: 'SourceHanSansCN-Regular' !important;
    background-color: #043F7A;
    border: 1px solid #2E97FF;
    text-align: center;
    color: #fff;
    font-size: 17px;
    line-height: 24px;
    height: 42px;

  }
  >>> .el-input__inner::placeholder {
    font-family: 'SourceHanSansCN-Regular' !important;
    text-align: center;
    color: #fff;
    font-size: 17px;
    line-height: 24px;
  }
  .el-input__suffix {
    display: none;  

  }
}
  >>> .el-input__inner::placeholder {
    font-family: SourceHanSansCN-Regular !important;
    // text-align: center;
    color: #fff;
    font-size: 15px;
    line-height: 24px;
  }
  >>> .el-input__inner {
    // text-align: center;
    font-family: 'SourceHanSansCN-Regular' !important;
    color: #fff;
    font-size: 15px;
    line-height: 24px;
  }
  >>> .popper{
  // :deep(.popper){
    width: auto;
    margin: 0;
    z-index: 99999;
    background-color: #03274a;
    left: 0px !important;
    border: 0;
    .popper__arrow {
      display: none;  
    }
    .el-select-dropdown__item {
      padding: 0 5px;
      text-align: center;
      font-size: 15px !important;
      color: #FFF !important;
      height: 19px !important;
      line-height: 19px !important;
      margin: 6px 0 !important;
      font-family: 'SourceHanSansCN-Regular' !important;
    }
    .hover, .selected {
      // color: #FFFFFF !important;
      color: #409EFF !important;
      background-color: #03274a !important;
      font-weight: 400;
    }
  }
  .top-select {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    height: 42px;
    .select-left {
      border: 1px solid #2E97FF;
      width 264px;
      border-radius: 4px;
    }
  }
  .el-button {
    font-family: 'SourceHanSansCN-Regular' !important;
    border-radius: 0;
    border: 0px;
    // height 37px;
    height 100%;
    width 88px;
    margin: 0;
    background-color #043F7A;
    font-size: 15px;
  }
  .top-search {
    width: 328px;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid #0091FF;
    display: flex;
    height: 42px;
    .el-autocomplete {
      width: 328px;

    }
    >>> .el-input {
      height: 100%;
      .el-input__inner {
        font-family: 'SourceHanSansCN-Regular' !important;
        background-color: #011A40;
        border: 0;
        font-size: 15px;
      }
    }
    .el-button {
      width: 88px;
      height: 40px;
      border-radius: 4px;
      background-color: #050f20;
      position relative;
      img {
        width: 88px;
        height: 40px;
        position absolute;
        top: 0px;
        left: -10px;
      }
    }
  }
  .bottom-info {
    position absolute;
    width: 769px;
    background: rgba(19, 35, 59, 0.65);
    height: 197px;
    border-radius: 15px 0px 0px 0px;
    bottom: 28px;
  }
  .right {
    position relative;
    img {
      position absolute;
      top: 0;
      width: 100%;
      height: 923px;
      z-index: -1;
    }
    .enterprise2 {
      position absolute;
      top: 63px;
      left: 13px;
      width: 444px;
    }
  }
  >>> .el-autocomplete-suggestion {
    background-color: rgba(0, 14, 36, 0.39) !important;
    width: 328px !important;
    color: #fff;
    ul {
      max-height: 100px;
      overflow: auto;
      li:hover{
        color: #3fa3fe !important;
        background-color: rgba(0,0, 0,0) !important;
        font-weight: 400;
      }
      li{
        padding: 0 15px;
        font-size: 15px;
        color: #D9F4F8;
        line-height: 24px;
      }
    }

    ::-webkit-scrollbar{
      width: 4px;
      height: 16px;
    }
    ::-webkit-scrollbar-thumb
    {
      background-color: rgba(46, 151, 255, 1);
      height: 4px;
    }
  }

  
</style>
